<template>
  <Scroll :height="getTopHeight">
    <Form
      ref="formData"
      :model="getFromData"
      :rules="ruleValidate"
      :label-width="80"
      label-colon
      :disabled="isDisable"
      :style="{width:'500px'}"
    >
      <FormItem label="名字" prop="name">
        <Input v-model="getFromData.name" placeholder="Enter uart name" clearable></Input>
      </FormItem>
      <FormItem label="波特率" prop="baudRate">
        <Select
          v-model="getFromData.baudRate"
          filterable
          allow-create
          @on-create="handleCreate"
          placeholder="Select your baudRate"
          clearable
        >
          <Option
            v-for="item in baudRateList"
            :value="item.value"
            :key="item.value"
          >{{ item.label }}</Option>
        </Select>
      </FormItem>
      <Row>
        <Col span="12">
          <FormItem label="数据位" prop="dataBits">
            <RadioGroup v-model="getFromData.dataBits">
              <Radio :label="7">7</Radio>
              <Radio :label="8">8</Radio>
            </RadioGroup>
          </FormItem>
        </Col>
        <Col span="12">
          <FormItem label="停止位" prop="stopBits">
            <RadioGroup v-model="getFromData.stopBits">
              <Radio :label="1">1</Radio>
              <Radio :label="2">2</Radio>
            </RadioGroup>
          </FormItem>
        </Col>
      </Row>
      <FormItem label="校验位" prop="parity">
        <RadioGroup v-model="getFromData.parity">
          <Radio label="none">None</Radio>
          <Radio label="even">Even</Radio>
          <Radio label="odd">Odd</Radio>
        </RadioGroup>
      </FormItem>
      <FormItem label="描述" prop="desc">
        <Input
          v-model="getFromData.desc"
          type="textarea"
          :autosize="{minRows: 2,maxRows: 5}"
          placeholder="Enter something..."
        ></Input>
      </FormItem>

      <FormItem v-if="isDisable">
        <Alert show-icon>
          提示:
          <Icon type="ios-bulb-outline" slot="icon"></Icon>
          <template slot="desc">表单已提交</template>
        </Alert>
      </FormItem>
      <FormItem v-else>
        <Button type="primary" @click="handleSubmit('formData')" :disabled="isDisable">Submit</Button>
        <Button
          @click="handleReset('formData')"
          style="margin-left: 8px"
          :disabled="isDisable"
        >Reset</Button>
      </FormItem>
    </Form>
  </Scroll>
</template>
<script>
export default {
  data() {
    return {
      isDisable: false,
      baudRateList: [
        {
          value: 9600,
          label: "9600",
        },
        {
          value: 38400,
          label: "38400",
        },
        {
          value: 57600,
          label: "57600",
        },
        {
          value: 115200,
          label: "115200",
        },
      ],
      formDataInit: {
        name: "",
        baudRate: "",
        dataBits: "",
        stopBits: "",
        parity: "",
        desc: "",
      },
      formData: {},
      ruleValidate: {
        name: [
          {
            required: true,
            message: "The name cannot be empty",
            trigger: "blur",
            type: "string",
          },
        ],
        baudRate: [
          {
            required: true,
            message: "Please select the baudRate",
            trigger: "change",
            type: "number",
          },
        ],
        dataBits: [
          {
            required: true,
            message: "Please select dataBits",
            trigger: "change",
            type: "number",
          },
        ],
        stopBits: [
          {
            required: true,
            message: "Please select stopBits",
            trigger: "change",
            type: "number",
          },
        ],
        parity: [
          {
            required: true,
            message: "Please select parity",
            trigger: "change",
            type: "string",
          },
        ],
        desc: [
          {
            required: true,
            message: "Please enter a personal introduction",
            trigger: "blur",
          },
          {
            type: "string",
            min: 2,
            message: "Introduce no less than 2 words",
            trigger: "blur",
          },
        ],
      },
    };
  },
  computed: {
    getTopHeight: function () {
      return this.$store.getters.getTopHeight - 64;
    },
    getUartCfgIndex: function () {
      return this.$store.getters.getUartCfgIndex;
    },
    getFromData: {
      get() {
        let index = this.$store.getters.getUartCfgIndex;
        let table = this.$store.getters.getHardConfTbl;
        if (index == -1) {
          this.formData = this.formDataInit;
        } else {
          this.formData = JSON.parse(JSON.stringify(table[index]));
        }
        return this.formData;
      },
      set(value) {
        this.formData = value;
      },
    },
  },
  methods: {
    handleSubmit(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          let index = this.getUartCfgIndex;
          if (index == -1) {
            let item = [];
            item.push(this.formData);
            this.$store.dispatch("addNewHardCfg", item);
            this.isDisable = true;
            this.$Message.success("Success!");
          } else {
            let item = this.formData;
            this.$store.dispatch("updataOneHardCfg", { item, index });
            this.isDisable = true;
            this.$Message.success("Success!");
          }
        } else {
          this.$Message.error("Fail!");
        }
      });
    },
    handleReset(name) {
      this.$refs[name].resetFields();
    },
    handleCreate(val) {
      this.baudRateList.push({
        value: parseInt(val),
        label: val,
      });
    },
    getFromData() {},
  },
};
</script>
<style >
</style>